<template>
<div class="login_page">
  <router-link to="/main">
    <div class="goback"><img src="@/assets/img/返回.png"></div>
  </router-link>
  <div class="warp">
    <div class="login-top clearfloat box-s">
      <div class="ge-back"><img src="@/assets/img/login.png"></div>
      <div class="logo-imgs">
        <img src="@/assets/img/收藏.png">
      </div>
    </div>
  </div>
  <div class="login">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="注册" name="first">
        <el-form ref="formPhone" class="form" :model="formPhone" label-width="120px">
          <el-input label="手机号" v-model="formPhone.account" prop="account" placeholder="请输入手机号" required mobile />
          <div style="position: relative;">
            <el-input label="验证码" v-model="formPhone.verifyCode" prop="verifyCode" placeholder="短信验证码" :clearable="false" required />
            <el-button type="text" class="code" v-show="Verification" @click="handleClickPhone">发送验证码</el-button>
            <el-button type="text" class="code-time" v-show="!Verification"><span>{{timer}}</span>s</el-button>
          </div>
          <el-input label="登录密码" :type="passwordType" v-model="formPhone.password" prop="password" placeholder="请输入密码" required />
          <el-input label="密码确认" :type="passwordType" v-model="formPhone.repassword" prop="repassword" placeholder="请再次输入密码" required />
          <el-button class="register-btn" @click="handleRegister('formPhone')">立即注册</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="登录" name="second">
        <el-form ref="formPhone" class="form" :model="formPhone" label-width="120px">
          <el-input label="手机号" v-model="formPhone.account" prop="account" placeholder="请输入手机号" required mobile />
          <el-input label="密码" :type="passwordType" v-model="formPhone.password" prop="password" placeholder="请输入密码" required />
          <el-button class="register-btn" @click="handleRegister('formPhone')">立即登录</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>

</div>
</template>

<script>
import {
  Reg_Phone
} from '@/utils/external/regexp'
export default {
  data() {
    return {
      activeName: 'second',
      formPhone: {
        account: "",
        password: "",
        verifyCode: "",
        repassword: "",
      },
      passwordType: "password",
      Verification: true, //通过v-show控制显示获取还是倒计时
      timer: 60, //定义初始时间为60s
      dialogVisible: false
    };
  },
  methods: {
    // 验证两次密码是否一致
    extraCheck() {
      if (this.formPhone.password != this.formPhone.repassword) {
        this.$message.warning("两次输入的密码不一致")
        return false
      }
      // this.formPhone.password = md5(this.formPhone.password)
      return true
    },
    login() {
      this.$router.push({
        name: 'login'
      })
    },
    // 验证手机号码
    checkPhoneNumber() {
      if (Reg_Phone(this.formPhone.account)) {
        return true
      }
      return false
    },
    // 验证码
    handleClickPhone() {
      if (!this.checkPhoneNumber(this.formPhone.account)) {
        return this.$message.warning('请输入正确的手机号码！');
      } else {
        this.Verification = false;
        let auth_timer = setInterval(() => {
          this.timer--;
          if (this.timer <= 0) {
            this.Verification = true;
            clearInterval(auth_timer)
            this.timer = 60;
          }
        }, 1000)
        this.formPhone.verifyCode = '1234'
      }
    },
    // 注册
    handleRegister(formPhone) {
      this.$refs[formPhone].validate(async valid => {
        if (valid) {
          if (!this.extraCheck(formPhone)) {
            return
          }
          try {
            //removeToken();
            // const res = await userApi.register(this.formPhone)
            // console.log(res)
            // this.form = res
            this.dialogVisible = true
          } catch (err) {
            this.$message.warning(err)
          }

        } else {
          this.$message.warning('请完善数据')
        }
      })
    },
    handleAuthentication() {
      this.$router.push({
        name: 'authentication',
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？关闭后返回登录页')
        .then(_ => {
          this.$router.push({
            name: 'login',
          })
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 270px;
  margin: 5px auto;
}

.login-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 223px;
}

.login-top .ge-back img {
  width: 100%;
  height: 223px;
  display: block;
  margin: 0 auto;
}

.logo-imgs {
  position: absolute;
  left: 36%;
  top: 80%;
  width: 104px;
  height: 104px;
  text-align: center;
  line-height: 104px;
  background: #fff;
  border-radius: 16px;
  -moz-box-shadow: 2px 2px 5px rgba(76, 130, 255, .4);
  -webkit-box-shadow: 2px 2px 5px rgb(76 130 255 / 40%);
  box-shadow: 2px 2px 5px rgb(76 130 255 / 40%);
  z-index: 1;
}

.logo-imgs img {
  margin-top: 14px;
  width: 76px;
  height: 76px;
}

.login {
  position: absolute;
  top: 45%;
  width: 80%;
  left: 10%
}

.code {
  position: absolute;
  left: 200px;
  top: 5px;
  z-index: 1;
  font-size: 12px;
  color: #2E5BFF;
  cursor: pointer;
}

.code-time {
  position: absolute;
  left: 200px;
  top: 5px;
  z-index: 1;
  font-size: 14px;
  color: #2E5BFF;
  cursor: pointer;
}

.register-btn {
  width: 180px;
  margin-top: 20px;
  background-color: #2e77e6;
  color: #ffffff !important;
}

.register-btn:hover {
  background-color: #2e77e6;
}

.goback {
  position: absolute;
  left: 4%;
  top: 2%;
  z-index: 2;
}

.goback img {
  width: 40px;
  height: 40px
}
</style>
